<template>
  <div class="chart-container">
    <div class="legend-container">
      <div class="legend-item">
        <span class="legend-icon" style="background-color: #00ffe6"></span>
        <p class="legend-label">
          当前空余车辆总数
          <span style="color: #00ffe6">{{ bwlylData.kycl_num }}</span>
        </p>
      </div>
      <div class="legend-item">
        <span class="legend-icon" style="background-color: #0092ff"></span>
        <p class="legend-label">
          当前泊位利用率
          <span style="color: #0092ff">{{ bwlylData.lyl_num }}%</span>
        </p>
      </div>
    </div>
    <div id="berth_echart"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      bwlylData: {},
    };
  },
  methods: {
    initChart() {
      fetch(`./testData/berthdata.json`, {
        method: "get",
        headers: {
          "Content-Type": "application/json",
        },
      })
        .then((response) => response.json())
        .then((data) => {
          let { utilizationData, bwlylData } = data;
          this.bwlylData = bwlylData;
          let option = {
            title: {
              text: "",
              subtext: ``,
              subtextStyle: {
                color: "#00FFE6",
              },
              right: "50%",
              textStyle: {
                color: "#fff",
              },
              textAlign: "center",
              padding: [20, 0, 0, 0],
            },
            legend: {
              show: false,
            },
            grid: {
              top: "15%",
              left: "3%",
              right: "4%",
              bottom: "2%",
              containLabel: true,
            },
            xAxis: {
              type: "category",
              data: [
                "南开",
                "河西",
                "和平",
                "河东",
                "河北",
                "红桥",
                "北辰",
                "西青",
                "东丽",
                "津南",
              ],
              axisLabel: {
                color: "#fff",
              },
              axisLine: {
                lineStyle: {
                  color: "#fff",
                },
              },
              axisTick: {
                show: false,
              },
            },
            yAxis: {
              type: "value",
              min: 0,
              max: 100,
              interval: 20,
              axisLabel: {
                formatter: "{value}%",
                color: "#fff",
              },
              axisLine: {
                lineStyle: {
                  color: "#fff",
                },
              },
              splitLine: {
                show: false,
                lineStyle: {
                  color: "#CCCCCC",
                },
              },
            },
            series: [
              {
                name: "利用率",
                type: "bar",
                data: utilizationData,
                barWidth: "40%",
                label: {
                  show: true,
                  position: "top",
                  formatter: "{c}%",
                  textStyle: {
                    color: "#fff",
                  },
                },
                itemStyle: {
                  color: {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: "#0092FF",
                      },
                      {
                        offset: 1,
                        color: "#00FFE6",
                      },
                    ],
                  },
                },
              },
            ],
          };
          let myChart = echarts.init(document.getElementById("berth_echart"));
          myChart.setOption(option, true);

          window.addEventListener("resize", () => {
            myChart.resize();
          });
        });
    },
  },
  mounted() {
    this.initChart();
  },
};
</script>
<style lang="scss" scoped>
#berth_echart {
  height: 100%;
}
.chart-container {
  height: calc(100% - 25px);
  position: relative;
}

.legend-container {
  padding-top: 3px;
  display: flex;
  justify-content: space-around;
  color: #fff;
}

.legend-item {
  display: flex;
  align-items: center;
}

.legend-icon {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 5px;
}
.legend-label {
  font-size: 16px;
}
</style>
